@extends('layout.master')

@section('content-header')
    <h1>Lokasi</h1>
    <ol class="breadcrumb">
        <li><a href="/"><i class="fa fa-dashboard"></i> Dashboard</a></li>
        <li><a href="{{ URL::route('lokasis') }}"><i class="fa fa-map-marker"></i> Lokasi</a></li>
        <li class="active"><i class="fa fa-plus-square"></i> Tambah</li>
    </ol>
@stop

@section('content')
<!-- Modal -->
<div class="modal fade modal-wide" id="all-penduduks-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Penduduk</h4>
            </div>        
            <div class="modal-body">
                <div class="form-group">
                    <div class="input-group">                        
                        <input class="form-control" type="text" id="cari-penduduk" placeholder="Cari Penduduk">
                        <div class="input-group-addon"><i class="fa fa-search"></i></div>
                    </div>
                </div>

                <ul class="list-unstyled list-penduduk-pemilik">
                    @foreach($penduduks as $penduduk)
                        <li class="col-xs-4"><a href="#" data-id="{{ $penduduk->id }}" data-nama="{{ $penduduk->nama }}" class="btn-select-penduduk"><i class="fa fa-user"></i> {{ $penduduk->nama }}</a></li>                    
                    @endforeach                    
                </ul>                
            </div>
            <div class="modal-footer">                                
                <button type="button" class="btn btn-sm btn-danger" data-dismiss="modal"><i class="fa fa-times"></i> Tutup</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<div class="row">
    <div class="col-xs-12">
        <div class="box">
            <div class="box-body table-responsive">

                {{ Form::open(array('route'=>array('lokasis.store'), 'method'=>'POST', 'class'=>'form-horizontal', 'role'=>'form', 'id'=>'frmInput')) }}

                    {{Form::hidden('user_id', Auth::user()->id)}}
                    <div class="form-group">
                        <label class="col-sm-2 control-label required">Nama</label>
                        <div class="col-sm-10">
                            {{Form::text('nama', null, array('class'=>'form-control'))}}
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label required">Jenis</label>
                        <div class="col-sm-10">
                            {{Form::select('tipe_id', $tipes, null, array('class'=>'form-control'))}}
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label required">Pemilik</label>
                        <div class="col-sm-6">
                            <input type="hidden" name="penduduk_id" id="penduduk_id">
                            <input class="form-control" type="text" placeholder="- - Pilih Penduduk Pemilik - -" readonly id="penduduk_nama">                            
                        </div>
                        <div class="col-sm-1">
                            <a href="#" class="btn btn-primary btn-pilih-penduduk"><i class="fa fa-search"></i> Daftar Penduduk</a>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label required">Alamat</label>
                        <div class="col-sm-10">
                            {{Form::textarea('alamat', null, array('class'=>'form-control'))}}
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Lokasi</label>
                        <div class="col-sm-10">
                            <div id="map_canvas"></div>
                            <input type="text" id="latFld" class="hidden" value="{{ $lingkungan['lat_lng']['0'] }}">
                            <input type="text" id="lngFld" class="hidden" value="{{ $lingkungan['lat_lng']['1'] }}">
                        </div>
                    </div>                    
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Keterangan</label>
                        <div class="col-sm-10">
                            {{Form::textarea('keterangan', null, array('class'=>'form-control'))}}
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="reset" class="btn btn-success"><i class="fa fa-refresh"></i> Reset</button>                            
                            <button type="submit" class="btn btn-primary"><i class="fa fa-floppy-o"></i> Save</button>                            
                        </div>
                    </div>

                {{ Form::close() }}
            </div><!-- /.box-body -->
        </div><!-- /.box -->
    </div>
</div>
@stop

@section('javascript')
<script type="text/javascript">
    var map;
    var markersArray  = [];
    var polygonCoords = [];    

    // Deletes all markers in the array by removing references to them
    function deleteOverlays() {
        if (markersArray) {
            for (i in markersArray) {
                markersArray[i].setMap(null);
            }
            markersArray.length = 0;
        }
    }


    function placeMarker(location) {
        // first remove all markers if there are any
        deleteOverlays();

        var marker = new google.maps.Marker({
            position: location,
            draggable: true,
            map: map
        });

        google.maps.event.addListener(marker, 'dragend', function() 
        {                        
            $('#latFld').val( marker.getPosition().d );
            $('#lngFld').val( marker.getPosition().e );                        
        });

        // add marker in markers array
        markersArray.push(marker);
    }

    function initialize() {
        var lat = $('#latFld').val();
        var lng = $('#lngFld').val();

        var map_canvas = document.getElementById('map_canvas');
        var map_options = {
            center: new google.maps.LatLng(lat, lng),
            zoom: {{ isset($lingkungan['zoom']) ? $lingkungan['zoom'] : '18';  }},
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(map_canvas, map_options);

        // get polygon data
        var promise = $.getJSON("{{ URL::route('lingkungan.get.polygon.json') }}");
        promise.done(function(coordinates){                                            
            for (var key in coordinates) {                
                var lat_lng = coordinates[key];
                polygonCoords.push(new google.maps.LatLng(lat_lng.lat, lat_lng.lng));
            }

            if(polygonCoords.length > 0) {
                var polygon = new google.maps.Polygon({
                    paths: polygonCoords                    
                });
                polygon.setMap(map);

                google.maps.event.addListener(polygon, "click", function(event)
                {                    
                    // place a marker
                    placeMarker(event.latLng);

                    // display the lat/lng in your form's lat/lng fields            
                    $('#latFld').val( event.latLng.lat() );
                    $('#lngFld').val( event.latLng.lng() );                        
                });
            }             
        });

        // add a click event handler to the map object
        google.maps.event.addListener(map, "click", function(event)
        {            
            // place a marker
            placeMarker(event.latLng);

            // display the lat/lng in your form's lat/lng fields            
            $('#latFld').val( event.latLng.lat() );
            $('#lngFld').val( event.latLng.lng() );                        
        });        

        google.maps.event.addListener(map, 'zoom_changed', function() {
            map.setCenter(new google.maps.LatLng($('#latFld').val(), $('#lngFld').val()));
        });        
    }

    google.maps.event.addDomListener(window, 'load', initialize);

    $(function() {
        $('.btn-pilih-penduduk').click(function(event) {
            event.preventDefault();

            $('#all-penduduks-modal').modal('show');
        });

        $('body').on('click', '.btn-select-penduduk', function(event) {
            event.preventDefault();
            
            var id   = $(this).data('id');
            var nama = $(this).data('nama');

            $('#penduduk_id').val( id );
            $('#penduduk_nama').val( nama );
            $('#all-penduduks-modal').modal('hide');        
        });

        $('#frmInput').submit(function(event) {
            event.preventDefault();
            var url = $(this).attr('action');
            var lat = $('#latFld').val();
            var lng = $('#lngFld').val();
            var lat_lng = lat + "|" + lng;

            var formData = $(this).serialize() + "&lat_lng=" + lat_lng + "&zoom=" + map.getZoom();

            var notice = new PNotify({
                text: "Sedang menyimpan...",
                type: "info",
                shadow: false,
                opacity: .8
            });

            $.ajax({
                url: url,
                type: 'post',
                data: formData,
                success: function(data) {
                    var options = {
                        text: data.msg,
                        type: data.type
                    };
                    notice.update(options);

                    if(data.type == "success") {
                        bootbox.dialog({
                            message: "Ingin tambah lokasi lagi ?",
                            title: "Konfirmasi",
                            buttons: {
                                success: {
                                    label: "Ya",
                                    className: "btn-success",
                                    callback: function() {
                                        location.reload();
                                    }
                                },
                                danger: {
                                    label: "Tidak",
                                    className: "btn-danger",
                                    callback: function() {
                                        window.location = "{{ URL::route('lokasis') }}";
                                    }
                                }    
                            }
                        });                        
                    }
                }
            });

        });

        $('body').on('change keyup', '#cari-penduduk', function(event) {            
            var keyword = $(this).val();

            $('body .list-penduduk-pemilik li').each(function() {
                if($(this).text().search(new RegExp(keyword, "i")) < 0) {
                    $(this).hide();
                }else{
                    $(this).show();
                }
            });
        });

    });
</script>
@stop